<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>店铺修改</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/aui.css"/>
    <script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="js/wxrem.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
    <!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->

    <script type="text/javascript">
        document.writeln("<script type=\"text/javascript\" src=\"js/common.js?" + Math.random() + "\"></scr" + "ipt>");
    </script>

</head>
<style>
    .box_show {
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, .5);
        position: fixed;
        top: 0;
        bottom: 0;
        display: none;
        z-index: 10;
    }

    .box_msg {
        height: 18.5rem;
        width: 90%;
        border-radius: 8px;
        position: absolute;
        background: #fff;
        z-index: 12;
        left: 50%;
        margin-left: -45%;
        top: 50%;
        margin-top: -13rem;
        display: none;
    }

    .shou_btn {
        display: flex;
        height: 5.55rem;
    }

    .shou_btn div {
        flex: 1;
        -webkit-flex: 1;
        text-align: center;
        line-height: 5.55rem;
        font-size: 1.4rem;
    }

    .shop_head {
        padding: 0 1.5rem;
        width: 100%;
        background: #fff;
        margin-top: 2rem;
    }

    .shop_logo, .shop_name {
        height: 5.4rem;
        font-size: 1.5rem;
        border-bottom: 1px solid #ebebeb;
    }

    .shop_name p {
        font-size: 1.4rem;
        float: right;
        margin-right: .9rem;
        color: #666;
        line-height: 5.4rem;
    }

    .shop_logo h4, .shop_name h4 {
        float: left;
        line-height: 5.4rem;
        font-size: 1.5rem;
    }

    .logo_img{
        height: 3.8rem;
        width: 3.8rem;
        border-radius: 50%;
        float: right;
        margin-right: .9rem;
        margin-top: .76rem;
    }
    .shop_logo input{
        right: 0;
        width:10rem;
        height: 3rem;
        top: 3rem;
        position: absolute;
        opacity: 0;
    }
    .shop_logo span, .shop_name span {
        float: right;
        display: block;
        line-height: 5.4rem;
    }

    .shop_recommend p {
        width: 18rem;
        color: #666;
        display: inline-block !important;
        font-size: 1.4rem;
        text-align: right;
        float: right;
        margin: 1rem .9rem 1rem 2rem;
    }

    .shou_mod {
        height: 13rem;
        border-bottom: 1px solid #ebebeb;
    }

    .shou_mod h3 {
        height: 6.5rem;
        line-height: 6.5rem;
        font-weight: 600;
        font-size: 1.5rem;
        text-align: center;
    }

    .shou_mod input {
        height: 4.2rem;
        width: 90%;
        border: 1px solid #ebebeb;
        border-radius: 4px;
        padding-left: 1rem;
        font-size: 1.3rem;
        margin: 0 auto 2.2rem;
        background: #fafafa;
    }

    .shop_save {
        width: 90%;
        height: 4.4rem;
        border-radius: 2.2rem;
        background: #ffd74b;
        margin: 0 auto;
        font-size: 1.5rem;
        font-weight: bold;
        color: #222222;
        line-height: 4.4rem;
        box-shadow: 3px 1px 27px 1px #ffd74b;
        text-align: center;
    }

    .shop_recommend {
        min-height: 5.4rem;
        margin-bottom: 3.7rem;
        overflow: hidden;
    }

    .shop_recommend h4 {
        display: inline-block !important;
        float: left;
        line-height: 5.4rem;
        font-size: 1.5rem;
    }

    .shop_recommend span {
        float: right;
        display: inline-block !important;
        line-height: 5.4rem;
    }

    .jiantou{
        float: right;
        height: 1.5rem;
        width: 1.5rem;
        margin-top: 1.9rem;
    }
</style>
<body style="overflow: hidden">
<div>
    <div class="box_show"></div>
    <div class="box_msg">
        <div class="shou_mod">
            <h3>修改</h3>
            <input type="text" placeholder="修改吧">
        </div>
        <div class="shou_btn">
            <div class="btn_esc">取消</div>
            <div class="btn_yes" style="color: #1aad1a;border-left: 1px solid #ebebeb;">确认</div>
        </div>
    </div>


    <div class="shop_head">
        <div class="shop_logo">
            <h4>店铺logo</h4>
            <img class="jiantou"  src="icon/jiantou.png" alt="">
            <img class="logo_img" id="diyUploadimg" src="" alt="">

        </div>
        <div class="shop_name">
            <h4>店铺名称</h4>
            <img class="jiantou" src="icon/jiantou.png" alt="">
            <p></p>
        </div>
        <div class="shop_recommend">
            <h4>店铺介绍</h4>
            <img class="jiantou" src="icon/jiantou.png" alt="">
            <p>有声书、小课、精品课，涵盖26大领域，任你挑选，还有免费听书可以领哦~</p>
        </div>
    </div>


</div>
</body>
<script>

    var signs = hex_md5(objKeySort({token: token, timestamp: date}))

    //获取商户信息
    $.ajax({
        type:"get",
        url:hostUrl + 'merchant/update/info/get',
        data:{
            token: token,
            timestamp: date,
            sign:signs,
        },
        async:true,
        success:function(data) {
            $('.shop_name p').text(data.data.nickname)//商户名称
            $('.shop_recommend p').text(data.data.signature)// 商户介绍
            localStorage.setItem('recommend',$('.shop_recommend p').text())
            $('.logo_img').attr('src' , data.data.headImgUrl)//商户头像


        }
    });

    var flag = 1// 判断是修改名称还是介绍
    $('.shop_name').click(function () {
        flag=1  //等于1 修改名称
        $('.shou_mod input').val('')
        $('.box_show').show()
        $('.box_msg').show()
        $('.shou_mod h3').text('店铺名称修改')
        $('.shou_mod input').attr('placeholder','请输入店铺名称')
        $('.shou_mod input').attr('maxlength','20')

    })
    $('.shop_recommend').click(function () {
        flag=2  //等于1 修改介绍
        $('.shou_mod input').val('')
        $('.box_show').show()
        $('.box_msg').show()
        $('.shou_mod h3').text('店铺介绍修改')
        $('.shou_mod input').attr('placeholder','请输入店铺介绍')
        $('.shou_mod input').attr('maxlength','80')

    })

    $('.shop_logo img').click(function () {


    });


    //点击确定
    $('.btn_yes').click(function () {
        var inputs = $('.shou_mod input').val()
        $('.box_show').hide()
        $('.box_msg').hide()

        if(flag == 1 && inputs!=''){ //修改店铺
            var text = $('.shop_recommend p').text()
            var obj = {token: token, timestamp: date}
            var sign = hex_md5(objKeySort(obj))
            $.ajax({
                type:"post",
                url:hostUrl + 'merchant/update/info/save' ,
                data:{
                    token: token,
                    timestamp: date,
                    nickName:inputs,
                    sign:sign,
                    signature:text
                },
                async:true,
                success:function(data) {
                    if(!data) return
                    if(data.status==0){
                        $('.shop_name p').text(inputs)
                        $('.shou_mod input').val('')
                    }


                }
            });
        }else if(flag == 2 && inputs!=''){ //修改介绍
            var obj = {token: token, timestamp: date}
            var sign = hex_md5(objKeySort(obj))
            $.ajax({
                type:"post",
                url:hostUrl + 'merchant/update/info/save' ,
                data:{
                    token: token,
                    timestamp: date,
                    nickName: $('.shop_name p').text(),
                    sign:sign,
                    signature:inputs
                },
                async:true,
                success:function(data) {
                    if(!data) return
                    if(data.status==0){
                        $('.shop_recommend p').text(inputs)
                        $('.shou_mod input').val('')
                    }


                }
            });
        }else {
            alert('不能为空')
        }

    });
    //点击取消
    $('.btn_esc').click(function () {
        $('.box_show').hide()
        $('.box_msg').hide()
    });

    $('#diyUploadimg').click(function () {
        var images = {
            localId: [],
            serverId: []
        };
        getToken(chooseImage)
        function chooseImage(){
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    images.localId = res.localIds;
                    uploadImg();
                }
            });
        }



        function uploadImg() {
            if (images.localId.length == 0) {
                alert('请先使用 chooseImage 接口选择图片');
                return;
            }
            var i = 0, length = images.localId.length;
            images.serverId = [];
            function upload() {
                wx.uploadImage({
                    localId: images.localId[i],
                    success: function (res) {
                        i++;
                        images.serverId.push(res.serverId);
                        if (i < length) {
                            upload();
                        }else{
                            wxImgCallback();
                        }
                    },
                    fail: function (res) {
                        alert(JSON.stringify(res));
                    }
                });
            }
            upload();
        }
        // })


        function wxImgCallback() {

            var sign = hex_md5(objKeySort({token: token, timestamp: date,mediaId:images.serverId[0]}))

            $.ajax({
                type : "get",
                async : false,//变异步为同步
                url : hostUrl + 'merchant/upload',
                data : {
                    mediaId : images.serverId[0],
                    token:token,
                    timestamp:date,
                    sign:sign
                },
                success : function(data) {
                    if(data.status==0){
                        window.location.reload()
                    }

                    }
                });
            }
    })
    //禁止分享
    function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');
    }

    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
    } else {
        onBridgeReady();
    }

</script>
</html>